<template>
	<view class="content">
        <!-- navbar -->
        <u-navbar :fixed="true" :safeAreaInsetTop="true" :placeholder="true"
            :shadow="true" @leftClick="back" title="培训管理" >
        </u-navbar>

        <!-- 内容 -->
        <view class="uni-area">
            <!-- 培训概览 -->
            <view class="u-m-t-50">
                <text class="u-font-32 font-bold">培训概览</text>
                <view class="u-m-t-30 uni-shadow u-flex u-row-around">
                    <view v-for="(item,index) in overview" :key="index" class="u-flex u-flex-col">
                        <text class="u-font-26">{{item.title}}</text>
                        <text class="u-m-t-20 u-font-42 font-bold">{{item.value}}</text>
                    </view>
                </view>
            </view>

            <!-- 培训记录 -->
            <view class="u-m-t-50">
                <text class="u-font-32 font-bold">培训记录</text>
                <!-- 列表 -->
                <view class="u-m-t-30 uni-shadow" v-for="(tem,ind) in page.list" :key="ind">
                    <view class="u-flex u-row-between">
                        <text class="u-font-28 font-bold">{{tem.xmmc}}</text>
                        <u-button class="uni-look-btn" type="warning" :plain="true" shape="circle" text="" @tap="detail(tem.id)">
                            <text class="u-font-24">查看</text>
                        </u-button>
                    </view>
                    <u-row class="u-flex u-flex-wrap">
                        <u-col v-for="(item,index) in tem.list" :key="index" 
                            span="6" class="u-m-t-20 u-font-26" style="flex-direction:row">
                            <text class="u-m-r-20 uni-gery-color">{{item.title}}</text>
                            <text class="u-line-1" style="max-width:60%" @longtap="longTap(item.value)">{{item.value}}</text>
                        </u-col>
                    </u-row>
                </view>
            </view>
            
            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                overview:[
                    { title:'培训次数', value: 0 },
                    { title:'累计人次', value: 0 },
                ],
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                    gcbh: uni.getStorageSync("userInfo").ssgcbh
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                },
			}
		},

        // 页面滚动
        onPageScroll(e){
            this.page.scrollTop = e.scrollTop
        },
        // 页面滚动到底部触发
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.getTrainList()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad() {
            // 培训概览
            this.getTrainoOerview()
            // 培训列表
            this.getTrainList()
        },

        
		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 长按事件
            longTap(value){
                this.$tools.uToast(this,'default','',value)
            },


            // 培训概览
            getTrainoOerview(){
                uni.showLoading({ title:'培训概览取中' })
                const parameter = {
                    gcbh: this.paging.gcbh,
                }
                this.$request(this,this.$apis.TrainoOerview, parameter).then(res=>{
                    // console.log('培训概览',res)
                    this.overview[0].value = res.value
                    this.overview[1].value = res.staffs
                }).then()
            },

            // 培训列表
            getTrainList(){
                this.page.status = 'loading'
                // console.log('培训列表---参数',this.paging)
                this.$request(this,this.$apis.TrainList,this.paging).then(res=>{
                    // console.log('培训列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.page.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push({
                                id: v.id,
                                xmmc: v.xmmc, // 项目名称
                                list:[
                                    { title:'培训内容', value: v.kcmc },
                                    { title:'开始时间', value: v.pxksrq },
                                    { title:'培训人数', value: v.pxrs },
                                    { title:'结束时间', value: v.pxjsrq },
                                ]
                            })
                        })
                    }else{
                        this.page.status = 'nomore'
                        uni.$u.toast('暂无更多培训相关数据')
                    }
                }).then()
            },


            // 培训详情
            detail(id){
                uni.navigateTo({ url: '/pages/other-bag/train-detail?id='+id })
            },

            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style lang="scss">
    // .content{}
</style>
